<template>
  <div class="app-container" style="height: 100vh">
    <h1>注册</h1>
    <div style="width: 760px;margin: auto auto">
      <el-card style="padding: 50px">
        <el-form label-width="80px">
          <el-form-item label="店铺名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="form.testPassword" type="password"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.location"></el-input>
          </el-form-item>
          <el-form-item label="微信支付号">
            <el-input v-model="form.subMchId"></el-input>
          </el-form-item>
          <el-form-item label="授权码">
            <el-input v-model="form.auth"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="6" :offset="6">
              <el-button type="primary" @click="onSubmit">确定</el-button>
            </el-col>
            <el-col :span="6" :offset="3">
              <el-button type="warning" @click="form={}">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import {Message} from "element-ui";

export default {
  name: "index",
  created() {
    window.navigator.geolocation.getCurrentPosition(
      (position) => {
        console.log(position);
        console.log(position.coords.longitude);
        console.log(position.coords.latitude);
      },
      (error) => {
        Message({
          message: '地址获取失败！',
          type: 'error',
          duration: 2 * 1000
        })
        console.log(error);
      }, {
        timeout: 3,
        maximumAge: 0
      }
    )
  },
  data() {
    return {
      form: {
        location: '',
        name: '',
        password: '',
        phone: '',
        testPassword: '',
        auth: '',
        subMchId: ''
      }
    }
  },
  methods: {
    onSubmit() {
      if (this.form.name == null || this.form.name === '') {
        this.$message({
          type: 'error',
          center: true,
          message: '请输入商铺名字！',
          duration: 1500
        });
        return;
      }
      if (this.form.password === '' || this.form.password == null) {
        this.$message({
          type: 'error',
          center: true,
          message: '请输入密码！',
          duration: 1500
        });
        return;
      }
      if (this.form.password !== this.form.testPassword) {
        this.$message({
          type: 'error',
          center: true,
          message: '两次密码不一致！',
          duration: 1500
        });
        return
      }
      request({
        url: `/shop?auth=${this.form.auth}`,
        method: 'POST',
        data: {...this.form}
      }).then(v => {
        this.$message({
          type: 'success',
          center: true,
          message: '注册成功！',
          duration: 1000
        });
        this.$store.dispatch('user/login', v.data)
        this.$router.replace({path: '/'})
      })
    }
  }
}
</script>

<style scoped>

</style>
